<template>
  <view class="container">
	  <uni-nav-bar
	    title="我的"
	    statusBar="true"
	    fixed="true"
	    color="#000000"
	    backgroundColor="#ffffff"
	  ></uni-nav-bar>
    <!-- 用户信息区域 -->
    <view class="user-info">
      <view class="avatar-section">
        <image class="avatar" src="/static/yognhumorentouxiang.png" mode="aspectFill"></image>
        <view class="user-detail">
          <text class="username">{{userInfo.username}}</text>
          <view class="user-tags">
            <text class="tag">普通用户</text>
            <text class="tag">器客户码</text>
          </view>
        </view>
      </view>
      <view class="more-icon">•••</view>
    </view>

    <!-- 用户资产 -->
    <view class="assets-section">
      <view class="asset-item">
        <text class="amount">0</text>
        <text class="label">余额</text>
      </view>
      <view class="asset-item">
        <text class="amount">0</text>
        <text class="label">积分</text>
      </view>
      <view class="asset-item">
        <text class="amount">0</text>
        <text class="label">优惠券</text>
      </view>
    </view>

    <!-- 订单区域 -->
    <view class="orders-section">
      <view class="section-header">
        <text class="title">商城订单</text>
        <view class="view-all" @click="orderListPage()">
          <text>全部订单</text>
          <text class="arrow">></text>
        </view>
      </view>
      <view class="order-types">
        <view class="type-item">
          <image class="icon" src="/static/daifukuan.png" mode="aspectFit"></image>
          <text class="label">待付款</text>
        </view>
        <view class="type-item">
          <image class="icon" src="/static/daifahuo.png" mode="aspectFit"></image>
          <text class="label">待发货</text>
        </view>
        <view class="type-item">
          <image class="icon" src="/static/daishouhuo.png" mode="aspectFit"></image>
          <text class="label">待收货</text>
        </view>
        <view class="type-item">
          <image class="icon" src="/static/daipingjia.png" mode="aspectFit"></image>
          <text class="label">待评价</text>
        </view>
        <view class="type-item">
          <image class="icon" src="/static/tuikuanshouhou.png" mode="aspectFit"></image>
          <text class="label">退款售后</text>
        </view>
      </view>
    </view>

    <!-- 账户设置 -->
    <view class="settings-section">
      <view class="setting-item">
        <view class="left">
          <image class="icon" src="/static/zhanghushezhi.png" mode="aspectFit"></image>
          <text class="label">账户设置</text>
        </view>
        <text class="arrow">></text>
      </view>
    </view>
	<view-tabbar tabIndex=3></view-tabbar>
  </view>
</template>

<script src="./index.js"></script>
<style src="./index.scss" lang="scss" scoped></style>
<style scoped>
/* #ifdef MP-WEIXIN || APP-PLUS */
::v-deep ::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
}

/* #endif */
</style>
